<style>
  .seed_file-input {
    position: absolute;
    opacity:0;
    height: 100%;
    z-index: 100;
  }
</style>
<template>
  <div>
    <div class="seed_top_banner">
      <div class="seed_back_arrow" @click="back">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zuo"></use>
        </svg>
      </div>
      <div class="seed_page_title"><span>编辑</span></div>
      <div class="seed_page_tool"></div>
    </div>
    <div>
      <!--头部-->
      <div class="seed_bargain_edit_head">
        <div class="seed_list_second_cboxa">
          <div class="show-img">
            <img v-bind:src="info.goods_image" @load="successLoadImg" @error="errorLoadImg">
          </div>
          <div class="seed_list_second_cbox_r">
            <span class="seed_list_second_cbox_r_t">{{info.goods_name}}</span>
            <div class="seed_list_second_cbox_b">
              <div class="seed_list_second_cbox_b_l">
                <span>秒杀价 ￥{{info.activity_money}}&emsp;</span>
                <s style="text-decoration:line-through; color: #9e9e9e">￥{{info.oral_price}}</s>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="seed_bargain_edit_container">
        <!--活动头图-->
        <div class="seed_bargain_edit_head_pic">
          <div class="seed_bargain_edit_head_pic_inner">
            <div class="seed_bargain_edit_head_pic_inner_img show-img">
              <input ref="file"
                 type="file"
                 class="seed_file-input"
                 accept="image/*"
                 @change="(value) => change(value, 1)"
              />
              <img v-bind:src="info.sec_image_url" @load="successLoadImg" @error="errorLoadImg" ref="sec_image"/>
            </div>
            <div class="seed_bargain_edit_head_pic_inner_text">
              <div class="seed_bargain_edit_head_pic_inner_text_1">
                <p style="font-size: 1.4rem;height: 60%;">活动头图</p>
                <p style="font-size: 1rem;height: 40%;">点击上传商品活动头图</p>
              </div>
            </div>
          </div>
        </div>
        <!--标题-->
        <div class="seed_bargain_edit_tip">
          <u></u>
          <span>&emsp;活动标题</span>
        </div>
        <textarea class="seed_bargain_edit_textarea" placeholder="请输入活动标题" v-model="info.sec_title"></textarea>
        <!--分享图片-->
        <div class="seed_bargain_edit_head_pic seed_bargain_edit_top_rem">
          <div class="seed_bargain_edit_head_pic_inner">
            <div class="seed_bargain_edit_head_pic_inner_img show-img">
              <input ref="file"
                 type="file"
                 class="seed_file-input"
                 accept="image/*"
                 @change="(value) => change(value, 2)"
              />
              <img v-bind:src="info.share_image_url" @load="successLoadImg" @error="errorLoadImg" ref="share_image"/>
            </div>
            <div class="seed_bargain_edit_head_pic_inner_text">
              <div class="seed_bargain_edit_head_pic_inner_text_1">
                <p style="font-size: 1.4rem;height: 60%;">分享图片</p>
                <p style="font-size: 1rem;height: 40%;">点击上传分享图片</p>
              </div>
            </div>
          </div>
        </div>
        <!--标题-->
        <div class="seed_bargain_edit_tip">
          <u></u>
          <span>&emsp;分享标题</span>
        </div>
        <textarea class="seed_bargain_edit_textarea" placeholder="请输入分享标题" v-model="info.share_title"></textarea>
        <!--标题-->
        <div class="seed_bargain_edit_tip">
          <u></u>
          <span>&emsp;分享描述</span>
        </div>
        <textarea class="seed_bargain_edit_textarea" placeholder="请输入分享描述" v-model="info.share_desc"></textarea>
      </div>
      <!--中部内容-->
      <div class="seed_bargain_edit_container_next seed_bargain_edit_top_rem">
        <div class="seed_bargain_edit_container">
          <div class="seed_bargain_edit_container_div">
            <div class="seed_bargain_edit_container_div_1">开始时间:</div>
            <div class="seed_bargain_edit_container_div_2">
              <input readonly="readonly" class="seed_bargain_edit_container_div_input" placeholder="请选择活动开始时间" @click='openPicker(0)' v-model="info.sec_start_time"/>
            </div>
          </div>
        </div>
        <div class="seed_bargain_edit_container">
          <div class="seed_bargain_edit_container_div">
            <div class="seed_bargain_edit_container_div_1">结束时间:</div>
            <div class="seed_bargain_edit_container_div_2">
              <input readonly="readonly" class="seed_bargain_edit_container_div_input" placeholder="请选择活动结束时间" @click='openPicker(1)' v-model="info.sec_end_time"/>
            </div>
          </div>
        </div>
        <div class="seed_bargain_edit_container">
          <div class="seed_bargain_edit_container_div">
            <div class="seed_bargain_edit_container_div_1">秒杀数量:</div>
            <div class="seed_bargain_edit_container_div_2">
              <input class="seed_bargain_edit_container_div_input" placeholder="请输入秒杀数量" v-model="info.activity_number"/>
            </div>
          </div>
        </div>
        <div class="seed_bargain_edit_container">
          <div class="seed_bargain_edit_container_div">
            <div class="seed_bargain_edit_container_div_1">限购:</div>
            <div class="seed_bargain_edit_container_div_2">
              <input class="seed_bargain_edit_container_div_input" placeholder="请输入限购数量" v-model="info.buy_limit"/>
            </div>
          </div>
        </div>
        <div class="seed_bargain_edit_container">
          <div class="seed_bargain_edit_container_div">
            <div class="seed_bargain_edit_container_div_1" style="width: 30%">销售数量倍数:</div>
            <div class="seed_bargain_edit_container_div_2" style="width: 70%">
              <input class="seed_bargain_edit_container_div_input" placeholder="请输入销售数量倍数" v-model="info.set_sale_times"/>
            </div>
          </div>
        </div>
        <div class="seed_bargain_edit_container">
          <div class="seed_bargain_edit_container_div">
            <div class="seed_bargain_edit_container_div_1" style="width: 30%">参与人数倍数:</div>
            <div class="seed_bargain_edit_container_div_2" style="width: 70%">
              <input class="seed_bargain_edit_container_div_input" placeholder="请输入参与人数倍数" v-model="info.set_join_times"/>
            </div>
          </div>
        </div>
      </div>
      <input class="seed_bargain_edit_submit" type="button" value="立即提交" @click="submitForm()"/>
    </div>
    <mt-datetime-picker
        type = "date"
        ref = "picker"
        year-format = "{value} 年"
        month-format = "{value} 月"
        date-format = "{value} 日"
        @confirm = "handleConfirm"
        :startDate = "startDate">
    </mt-datetime-picker>
  </div>
</template>
<script>
const MAX_SIZE = 2 * 1024 * 1024
export default {
  data () {
    return {
      id: '',
      info: [],
      website: '',
      startDate: new Date(),
      time_type: 0
    }
  },
  created () {
    this.id = this.$route.params.id
    this.getDetail()
  },
  methods: {
    change (e, type) {
      let file = e.target.files[0], self = this
      if (window.FileReader && file) {
        if (file.size < MAX_SIZE) {
          // 读取文件转化图片base64
          let fr = new FileReader()
          fr.readAsDataURL(file)
          fr.onload = (e) => {
            if (type === 1) {
              this.info.sec_image = file
              this.info.sec_image_url = e.target.result
              self.$refs.sec_image.classList.remove('seed_image_hide')
            }
            if (type === 2) {
              this.info.share_image = file
              this.info.share_image_url = e.target.result
              self.$refs.share_image.classList.remove('seed_image_hide')
            }
          }
        } else {
          this.$MessageBox({
            title: '警告',
            message: `图片尺寸过大，图片请小于2M`
          })
        }
      }
    },
    handleConfirm (data) {
      if (this.time_type === 0) {
        this.info.sec_start_time = this.$utils.formatDate(data)
      } else {
        this.info.sec_end_time = this.$utils.formatDate(data)
      }
    },
    openPicker (type) {
      this.time_type = type
      this.$refs.picker.open()
    },
    back () {
      this.$router.push({name: 'activity-seckill', params: {tab: this.$route.params.tab}})
    },
    getDetail () {
      let self = this
      this.$request.SeckillEdit({id: this.id}).then(data => {
        data.sec_image_url = data.website + '/' + data.sec_image
        data.share_image_url = data.website + '/' + data.share_image
        self.info = data
        self.startDate = new Date(2015)
      })
    },
    submitForm () {
      this.$MessageBox.confirm('是否保存修改?').then(action => {
        event.preventDefault()
        let formData = new FormData()
        formData.append('do_type', 'edit')
        formData.append('sec_image', this.info.sec_image)
        formData.append('sec_start_time', this.info.sec_start_time)
        formData.append('sec_end_time', this.info.sec_end_time)
        formData.append('sec_title', this.info.sec_title)
        formData.append('share_title', this.info.share_title)
        formData.append('activity_money', this.info.activity_money)
        formData.append('activity_number', this.info.activity_number)
        formData.append('share_image', this.info.share_image)
        formData.append('share_desc', this.info.share_desc)
        formData.append('buy_limit', this.info.buy_limit)
        formData.append('set_join_times', this.info.set_join_times)
        formData.append('set_sale_times', this.info.set_sale_times)
        formData.append('id', this.info.id)
        formData.append('token', this.$utils.getCookie('token'))
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        let self = this
        this.$http.post(this.$config.website + '/mobile/shop.tool.activity_seckill/seckill_save', formData, config).then(function (res) {
          if (res.data.status === 200) {
            self.$toast('保存成功')
            self.$router.push({name: 'activity-seckill', params: {tab: self.$route.params.tab}})
          } else {
            self.$toast(res.data.msg)
          }
        })
      })
    }
  }
}
</script>
